<template>
  <div class="root">
    <!-- 这个是普通写法，下面我们看一下动态组件的写法 -->
    <!-- <Home v-if="title=='主页'"></Home>
    <Center v-else></Center> -->

    <!-- 
      如果你想让组件里的内容在被切走后依然能够保留里面的内容，比如输入框里的文字，可以用keepAlive或者keep-alive标签包起来
      如果你只想让指定的组件保留内容，使用include属性指明即可，有多个就用逗号隔开。不过要注意，include里面写的是组件的名字，就是组件的代码里定义的name，不是你引入时候自定义的名字。比如这个案例中，组件里的名字就是小写字母的home和center。
    -->
    <KeepAlive include="home,center">
      <component :is="title"></component>
    </KeepAlive>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "./views/Tabbar.vue";
import Center from "./views/Center.vue";
import Home from "./views/Home.vue";
import store from "./views/store";

export default {
  components: {
    Tabbar,
    Center,
    Home,
  },
  data() {
    return {
      title: "主页",
    };
  },
  mounted() {
    // 只要名字对应上就可以
    var obj = {
      主页: "Home",
      中心: "Center",
    };
    store.subscribe((title) => {
      console.log(title,obj[title]);
      this.title = obj[title];
    });
  },
};
</script>

<style scoped>
.root {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
